﻿

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pike Admin - Free Bootstrap 4 Admin Template</title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">


    <!-- Favicon -->
    <link rel="shortcut icon" href="~/Content/home/assets/images/favicon.ico">


    <!-- Bootstrap CSS -->
    <link href="~/Content/home/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- Font Awesome CSS -->
    <link href="~/Content/home/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <!-- Custom CSS -->
    <link href="~/Content/home/assets/css/style.css" rel="stylesheet" type="text/css" />

    <!-- BEGIN CSS for this page -->

    <link rel="shortcut icon" href="~/Content/home/assets/mydowload/dataTables.bootstrap4.min.css">
    <!-- END CSS for this page -->

    <link href="~/Content/css/admin.css" rel="stylesheet" />
</head>

<body>
    <!-- Start content -->
    <div class="content">

        <div class="container-fluid" style="margin-top:30px">




            <div class="row">


                <div class="col-xs-12 col-md-6 col-lg-6 col-xl-4">
                    <div class="card-box noradius noborder bg-warning">
                        <i class="fa fa-bar-chart float-right text-white"></i>
                        <h6 class="text-white text-uppercase m-b-20">总访问人数</h6>
                        <h1 class="m-b-20 text-white counter">@ViewBag.allCount</h1>
                        <span class="text-white">Total number of visitors</span>
                    </div>
                </div>

                <div class="col-xs-12 col-md-6 col-lg-6 col-xl-4">
                    <div class="card-box noradius noborder bg-info">
                        <i class="fa fa-user-o float-right text-white"></i>
                        <h6 class="text-white text-uppercase m-b-20">今日访问</h6>
                        <h1 class="m-b-20 text-white counter">@ViewBag.todayCount</h1>
                        <span class="text-white">Today to visit</span>
                    </div>
                </div>

                <div class="col-xs-12 col-md-6 col-lg-6 col-xl-4">
                    <div class="card-box noradius noborder bg-danger">
                        <i class="fa fa-bell-o float-right text-white"></i>
                        <h6 class="text-white text-uppercase m-b-20">预定成功数</h6>
                        <h1 class="m-b-20 text-white counter">@ViewBag.signCount</h1>
                        <span class="text-white">Number of scheduled successes</span>
                    </div>
                </div>
            </div>
            <!-- end row -->



            <div class="row">

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-8">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h3><i class="fa fa-line-chart"></i> 预定信息</h3>

                        </div>

                        <div class="card-body">
                            <canvas id="lineChart"></canvas>
                        </div>
                        <div class="card-footer small text-muted">Booking information</div>
                    </div><!-- end card-->
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h3><i class="fa fa-bar-chart-o"></i> 用户男女比例</h3>

                        </div>

                        <div class="card-body">
                            <canvas id="pieChart"></canvas>
                        </div>
                        <div class="card-footer small text-muted">Male-female ratio </div>
                    </div><!-- end card-->
                </div>


            </div>
            <!-- end row -->






        </div>
        <!-- END container-fluid -->

    </div>
    <!-- END content -->
    <!-- END content-page -->
    <!-- END main -->

    <script src="~/Content/home/assets/js/modernizr.min.js"></script>
    <script src="~/Content/home/assets/js/jquery.min.js"></script>
    <script src="~/Content/home/assets/js/moment.min.js"></script>

    <script src="~/Content/home/assets/js/popper.min.js"></script>
    <script src="~/Content/home/assets/js/bootstrap.min.js"></script>

    <script src="~/Content/home/assets/js/detect.js"></script>
    <script src="~/Content/home/assets/js/fastclick.js"></script>
    <script src="~/Content/home/assets/js/jquery.blockUI.js"></script>
    <script src="~/Content/home/assets/js/jquery.nicescroll.js"></script>

    <!-- App js -->
    <script src="~/Content/home/assets/js/pikeadmin.js"></script>

    <!-- BEGIN Java Script for this page -->

    <script src="~/Content/home/assets/mydowload/Chart.min.js"></script>
    <script src="~/Content/home/assets/mydowload/jquery.dataTables.min.js"></script>
    <script src="~/Content/home/assets/mydowload/dataTables.bootstrap4.min.js"></script>

    <!-- Counter-Up-->
    <script src="~/Content/home/assets/plugins/waypoints/lib/jquery.waypoints.min.js"></script>
    <script src="~/Content/home/assets/plugins/counterup/jquery.counterup.min.js"></script>

    <script>
        $(document).ready(function () {
            // data-tables
            $('#example1').DataTable();

            // counter-up
            $('.counter').counterUp({
                delay: 10,
                time: 600
            });
        });
    </script>

    <script type="text/javascript">
        var ctx1 = document.getElementById("lineChart").getContext('2d');
        //执行ajax
        $.ajax({
            url: '/Home/GetOrderPool',
            type: 'get',
            success: function (data) {
                debugger

                var jsondata = JSON.parse(data);


                var lineChart = new Chart(ctx1, {
                    type: 'bar',
                    data: jsondata,
                    options: {
                        tooltips: {
                            mode: 'index',
                            intersect: false
                        },
                        responsive: true,
                        scales: {
                            xAxes: [{
                                stacked: true,
                            }],
                            yAxes: [{
                                stacked: true
                            }]
                        }
                    }
                });
            }
        });



        var ctx2 = document.getElementById("pieChart").getContext('2d');
        var pieChart = new Chart(ctx2, {
            type: 'pie',
            data: {
                datasets: [{
                    data: [@ViewBag.girlCount,@ViewBag.boyCount],
                    backgroundColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',

                    ],
                    label: 'Dataset 1'
                }],
                labels: [
                    "女",
                    "男"
                ]
            },
            options: {
                responsive: true
            }

        });



    </script>
    <!-- END Java Script for this page -->

</body>
</html>
